<template>
  <div>
    <el-dialog
      :before-close="handleClose"
      :visible.sync="uploadVisible"
      destroy-on-close
      title="批量上传银行数据"
      width="40%"
    >
      <div slot="title" class="dialog-footer">
        <span class="text">批量上传银行数据</span>
      </div>
      <span class="text">请选择银行</span>
      <el-select
        style="margin-left: 20px"
        size="mini"
        v-model="bankType"
        placeholder="请选择银行"
        class="inputSelect"
        :popper-append-to-body="false"
      >
        <el-option label="建设银行" value="jianshe"></el-option>
        <el-option label="邮政储蓄银行" value="youzheng"></el-option>
      </el-select>
      <span style="margin-left: 20px" class="text">请选择银行</span>
      <el-select
        style="margin-left: 20px"
        size="mini"
        v-model="dataType"
        placeholder="请选择保留类型"
        class="inputSelect"
        :popper-append-to-body="false"
      >
        <el-option label="余额" value="yue"></el-option>
        <el-option label="流水" value="liushui"></el-option>
      </el-select>
      <el-upload
        class="upload-demo"
        action="#"
        ref="upload"
        drag
        accept=".xls, .xlsx"
        :on-change="handleChange"
        :file-list="fileList"
        :auto-upload="false"
        :show-file-list="true"
        multiple
        style="text-align: center; margin-top: 30px"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text" style="color: #ffffff">
          将文件拖到此处，或
          <em style="color: hsl(180, 100%, 50%)">点击上传</em>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="canCle()">取 消</el-button>
        <el-button type="primary" @click="uploadFile">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    uploadExcel_youzheng,
    uploadExcel_jianshe,
    uploadExcel_youzhengyue,
    uploadExcel_jiansheyue,
  } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'uploadBank',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
      return {
        fileList: [],
        bankType: 'jianshe',
        uploadVisible: false,
        dataType: 'yue',
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      openDialog() {
        this.uploadVisible = true
      },
      canCle() {
        this.$refs.upload.clearFiles()
        this.fileList = []
        this.uploadVisible = false
      },
      handleClose(done) {
        this.$refs.upload.clearFiles()
        this.fileList = []
        this.uploadVisible = false
      },
      handleChange(file, fileList) {
        fileList.forEach((item, index) => {
          if (item.size > 10485760) {
            setTimeout(() => {
              fileList.splice(index, 1)
              this.$notify.error({
                title: '错误',
                message: '文件大小不能超过 10MB!',
              })
            }, 300)
          }
        })
        // this.fileList是一个全局变量
        this.fileList = fileList
      },
      uploadFile() {
        if (!this.fileList.length) {
          return this.$notify.error({
            title: '错误',
            message: '未选取文件',
          })
        } else {
          switch (this.bankType) {
            case 'jianshe':
              if (this.dataType == 'yue') {
                this.uploadFile_jiansheyue()
              } else if (this.dataType == 'liushui') {
                this.uploadFile_jianshe()
              } else {
                this.$notify.error({
                  title: '错误',
                  message: '请选择需要保留的数据类型！',
                })
              }
              break

            case 'youzheng':
              if (this.dataType == 'yue') {
                this.uploadFile_youzhengyue()
              } else if (this.dataType == 'liushui') {
                this.uploadFile_youzheng()
              } else {
                this.$notify.error({
                  title: '错误',
                  message: '请选择需要保留的数据类型！',
                })
              }
              break

            default:
              break
          }
        }
      },
      /* 建设银行流水 */
      uploadFile_jianshe() {
        let formData = new FormData()
        this.fileList.forEach((item) => {
          console.log(item)
          formData.append('files', item.raw)
        })
        this.$loading.show()
        uploadExcel_jianshe(formData)
          .then((res) => {
            if ((res.code = 1)) {
              this.$notify({
                title: '成功',
                type: 'success',
                message: '上传成功!共上传' + res.data.length + '条数据！',
              })
              this.$emit('getBank', true)
            }
            this.$refs.upload.clearFiles()
            this.fileList = []
            this.uploadVisible = false
            this.$loading.close()
          })
          .catch((err) => {
            this.$loading.close()
          })
      },
      /* 建设银行余额 */
      uploadFile_jiansheyue() {
        let formData = new FormData()
        this.fileList.forEach((item) => {
          console.log(item)
          formData.append('files', item.raw)
        })
        this.$loading.show()
        uploadExcel_jiansheyue(formData)
          .then((res) => {
            if ((res.code = 1)) {
              this.$notify({
                title: '成功',
                type: 'success',
                message: '上传成功!共上传' + res.data.length + '条数据！',
              })
              this.$emit('getBank', true)
            }
            this.$refs.upload.clearFiles()
            this.fileList = []
            this.uploadVisible = false
            this.$loading.close()
          })
          .catch((err) => {
            this.$loading.close()
          })
      },
      /* 邮政银行流水 */
      uploadFile_youzheng() {
        let formData = new FormData()
        this.fileList.forEach((item) => {
          formData.append('files', item.raw)
        })
        this.$loading.show()
        uploadExcel_youzheng(formData)
          .then((res) => {
            if ((res.code = 1)) {
              this.$notify({
                title: '成功',
                type: 'success',
                message: '上传成功!共上传' + res.data.length + '条数据！',
              })
              this.$emit('getBank', true)
            }
            this.$refs.upload.clearFiles()
            this.fileList = []
            this.uploadVisible = false
            this.$loading.close()
          })
          .catch((err) => {
            this.$loading.close()
          })
      },
      /* 邮政银行余额 */
      uploadFile_youzhengyue() {
        let formData = new FormData()
        this.fileList.forEach((item) => {
          formData.append('files', item.raw)
        })
        this.$loading.show()
        uploadExcel_youzhengyue(formData)
          .then((res) => {
            if ((res.code = 1)) {
              this.$notify({
                title: '成功',
                type: 'success',
                message: '上传成功!共上传' + res.data.length + '条数据！',
              })
              this.$emit('getBank', true)
            }
            this.$refs.upload.clearFiles()
            this.fileList = []
            this.uploadVisible = false
            this.$loading.close()
          })
          .catch((err) => {
            this.$loading.close()
          })
      },
    },
    created() {},
    mounted() {},
  }
</script>

<style lang="less">
  .el-upload {
    background: rgba(48, 89, 224, 0);
    border: 1px solid #295a85;
    width: 500px;
    height: 300px;
    .el-upload-dragger {
      border: 1px solid #295a85;
      background: rgba(48, 89, 224, 0.2);
      width: 500px;
      height: 300px;
      .el-icon-upload {
        margin: 18% 0 16px;
        font-size: 100px;
      }
    }
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
  .el-upload-list__item-name {
    color: #00ffff;
    .el-icon-document {
      color: #00ffff;
    }
  }
</style>
